{% extends 'base.html' %}
{% block title %}
    用户注册
{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        #center {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #center h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        #tab {

            text-align: center;
        }
        #tab p{
            font-size: 18px;
        }

        #tab span {
            display: inline-block;
            padding: 10px;
            text-align: center;
            cursor: default;
            color: #888888;
            font-size: 16px;
        }

        .tips {
            color: red;
            font-size: 14px;
        }

        #btnCheck {
            width: 140px;
        }
    </style>
{% endblock %}

{% block content %}
    <div id="center" class=" col-lg-3 col-lg-offset-4 col-md-5 col-md-offset-4 col-sm-5 col-sm-offset-4 col-xs-8 col-xs-offset-2">
        <h1>用户登录</h1>
        <div id="tab">
            <span><p> &nbsp;&nbsp;账号&nbsp;&nbsp;密码&nbsp;&nbsp;|&nbsp;&nbsp;手机验证码&nbsp;&nbsp;</p></span>
        </div>
        <div class="logintab">
            <p class="tips">{{ msg }}</p>
            <form class="form-horizontal" method="post" action="{{ url_for('user.login') }}?f=1">
                <div class="form-group">
                    <label for="inputUsername" class="col-lg-4 control-label">用户名</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" id="inputUsername" placeholder="此处输入账号"
                               name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-4  control-label">密码</label>
                    <div class="col-lg-8">
                        <input type="password" class="form-control" id="inputPassword" placeholder="此处输入密码"
                               name="password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-12 col-lg-offset-3 col-lg-12  col-sm-offset-2 col-sm-12  col-sx-offset-2 col-xs-12">
                        <button type="submit" class="btn btn-primary  col-md-3 col-xs-offset-1">登&nbsp;&nbsp;录</button>
                        <button type="reset"
                                class="btn btn-primary col-md-3 col-md-offset-1 col-sm-offset-2  col-xs-offset-2">
                            重&nbsp;&nbsp;置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="logintab">
            <p class="tips">{{ msg }}</p>
            <form class="form-horizontal" method="post" action="{{ url_for('user.login') }}?f=2">
                <div class="form-group">
                    <div>
                        <input type="text" class="form-control" id="inputPhone" placeholder="此处输入手机号码" name="phone">
                        <span> </span>
                    </div>
                </div>
                <div class="form-group" style="margin-left: -30px;">
                        <div class="col-lg-9">
                            <input type="text" class="form-control" id="inputCode" placeholder="验证码" name="code">
                        </div>
                        <div class="col-lg-2 col-md-2 col-xs-2">
                            <input type="button" id="btnCheck" class="btn btn-info " value="发送验证码">
                        </div>
                    </div>

                <div class="form-group">
                    <div class="col-md-12 col-xs-12  col-sm-12 col-lg-12">
                        <button type="submit" class="btn btn-primary">登&nbsp;&nbsp;录</button>
                        <button type="reset"
                                class="btn btn-primary col-lg-offset-5 col-md-offset-4 col-sm-offset-4 col-xs-offset-0">
                            重&nbsp;&nbsp;置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
        $(function () {
            // 显示隐藏登录方式
            let logintab = $(".logintab").hide();
            logintab.first().show();
            $("#tab span").each(function (i) {
                $(this).click(function () {
                    logintab.hide();
                    logintab.eq(i).show();
                })
            });

            //发送验证码
            $('#btnCheck').click(
                function () {
                    let phone = $('#inputPhone').val();
                    let span_ele = $('#inputPhone').next('span');
                    span_ele.text('');
                    if (phone.length === 11) {
                        $.get({
                            url: '{{ url_for('user.send_message') }}',
                            data: {
                                phone: phone
                            },
                            success: function (data) {
                                if (data.code === 200) {
                                    alert(data.msg);
                                } else {
                                    alert(data.msg);
                                }

                            }
                        });
                    } else {
                        span_ele.css({
                            color: 'red',
                            fontsize: '12px'
                        });
                        span_ele.text('手机号码必须是11位！');
                    }
                }
            );

        });

    </script>
{% endblock %}

